import { ref, computed } from "vue";
import { useRouter } from "vue-router";
import { useUserStore } from "../../store/user";
import { useSearchStore } from "../../store/search"
import jsCookie from "js-cookie";
import { zlDialog } from "../../utils/zlDialog"

export const useNavBarHooks = () => {
  const router = useRouter();
  const store: any = useUserStore();
  const searchStore = useSearchStore()

  const userAvatar = computed(() => store.userInfo?.avatar);
  const unRedMsgCount = computed(() => store.userInfo?.unReadMessage)
  const address = computed(() => store.userInfo?.areaName)
  const vip = computed(() => store.userInfo?.vip)
  searchStore.getDictDatas()
  const currAreaID = computed(() => searchStore.globalArea.id)
  const cyrrAreaLabel = computed(() => searchStore.globalArea.label)
  const areaTree = computed(() => searchStore.addressTree)
  const selectConfig = {
    checkStrictly: true,
    value: "id",
  };
  const addressChange = (e: any, cascaderEl: any) => {
    if (e) {
      searchStore.changeGlobalArea({ id: e[e.length - 1], label: cascaderEl.getCheckedNodes()[0].label })
    }
  }

  const navList = ref([
    { path: "/vipCenter", label: "会员中心" },
    { path: "/privacy", label: "隐私政策" },
    { path: "/agreement", label: "用户协议" }
  ]);

  const goPage = (path: string, query?: { name: string }) => {
    router.push({ path, query });
  };

  /**
   * 退出登录
   */
  const logout = () => {
    // 删除token并且还原
    jsCookie.remove("token");
    jsCookie.remove("address");
    store.getUserInfo();
    location.reload()
  };

  /**
   * 创建规划
   */
  const createProject = () => {
    if (!jsCookie.get("token")) return zlDialog()
    router.push({ path: "/matching" })
  }



  return {
    navList,
    goPage,
    userAvatar,
    address,
    logout,
    createProject,
    areaTree,
    selectConfig,
    addressChange,
    currAreaID,
    cyrrAreaLabel,
    unRedMsgCount,
    vip
  };
};
